/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from 'react'; // react属性
import './index.css' // 样式文件
import { useNavigate, useLocation } from 'react-router-dom' // 路由引入
import { List, NavBar, Toast } from 'antd-mobile' // UI组件
import { getDouyinHot, getWbHot, getToutiao, getZhihuHot, getBaiduRD, getBili } from '@/api/index' // 抖音热搜 微博热搜 今日头条热搜 知乎热搜 百度热搜 哔哩哔哩热搜
import { LeftOutline } from 'antd-mobile-icons' // icon图标


function MyHot() {

  /* 路由 */
  const navigate = useNavigate()
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const pageType: string = params.get('type') || ''


  /* 变量声明 */
  const [hotList, setHotList] = useState<any[]>([]) // 热搜列表
  const [hotListName, setHotListName] = useState<string>('') // 热搜名字

  /* 事件函数 */
  // 获取热搜列表
  const getHotList = async () => {
    const Api: any = {
      'douyin': getDouyinHot,
      'weibo': getWbHot,
      'toutiao': getToutiao,
      'zhihu': getZhihuHot,
      'baidu': getBaiduRD,
      'bzhan': getBili,
    }
    console.log(pageType);

    Toast.show({
      icon: 'loading',
      content: '加载中…',
      duration: 0,
    })
    try {
      const res = await Api[pageType]()
      setHotList(res.data.data)
      setHotListName(res.data.name + res.data.subtitle)
      Toast.clear()
      console.log(res)
    } catch (error) {
      Toast.clear()
      console.log(error);
    }
  }

  /* 函数调用 */
  useEffect(() => {
    getHotList()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>
      <div className='hot-container'>
        <div className='v-bg'></div>
        <div className='content'>
          <NavBar backIcon={<LeftOutline color='#fff' />} onBack={() => navigate(-1)}></NavBar>
          <List header={hotListName} style={{
            '--border-bottom': 'none',
            '--border-top': 'none',
            '--border-inner': 'none',
            'color': '#fff'
          }}>
            {
              hotList.map((item, index) => {
                return <List.Item key={index} extra={item.hot} onClick={() => { window.open(item.url, '_blank') }}>
                  {item.title}
                </List.Item>
              })
            }
          </List>

        </div>
      </div>
    </>
  )
}


export default MyHot